<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日程表</title>
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.print.min.css" media='print'>
    <script type="text/javascript" src="../js/moment.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/locale-all.js"></script>
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                locale:"zh-cn",
                defaultDate: '2016-12-12',
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                    var title = prompt('Event Title:');
                    var eventData;
                    if (title) {
                        eventData = {
                            title: title,
                            start: start,
                            end: end
                        };
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                    }
                    $('#calendar').fullCalendar('unselect');
                },
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2016-12-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2016-12-07',
                        end: '2016-12-10'
                    }
                ]
            });
        })
    </script>
</head>
<body>

<div id='calendar'></div>

</body>
</html>